<template>
	<view id="waterfall_flow" class="waterfall-flow" :style="{'--pad':padpx,'--gap':gappx,'--col':columns}">
		<view class="item" v-for="(item,index) in list" :key="index"
			:style="{'--mbt':mbtpx,'--br':brpx,'grid-row':`span ${item.rows?item.rows:colWidth}`}"
			@click="clickItem(item)">
			<waterfall-flow-image :image="item[imageKey]" imgMode="widthFix" :height="item.imageHeight" :index="index"
				:border-radius="imageBR" @finish="loadImage($event,item)"
				@click="clickImage(item)"></waterfall-flow-image>
			<view class="char" :style="{'--h':charSizeFn}" v-if="showChar && item.rows && item.showChar">
			</view>
		</view>
	</view>
</template>
<script>
	const windowWidth = uni.getSystemInfoSync().windowWidth;
	import waterfallFlowImage from './waterfall-flow-image.vue';
	export default {
		components: {
			waterfallFlowImage
		},
		props: {
			value: Array,
			imageKey: {
				type: [String],
				default: 'img_url'
			},
			padding: {
				type: [Number],
				default: 0
			},
			gap: {
				type: [Number],
				default: 20
			},
			columns: {
				type: [String, Number],
				default: 2
			},
			itemBR: {
				type: [String, Number],
				default: 20
			},
			imageBR: {
				type: [String],
				default: '20rpx 20rpx 0 0'
			},
			mbt: {
				type: [Number],
				default: 20
			},
			showChar: {
				type: [Boolean],
				default: true
			},
			charSize: {
				type: [Number],
				default: 60
			}
		},
		computed: {
			charSizeFn() {
				return 40;
				// return this.showChar ? `${uni.upx2px(this.charSize)}px` : 0;
			},
			colWidth() {
				const gap = uni.upx2px(this.gap);
				const padding = uni.upx2px(this.padding);
				const result = Math.ceil(((this.fallWidth - gap * (this.columns + 1) - padding * 2) / this.columns) + uni
					.upx2px(parseFloat(this.mbt)));
				return result;
			},
			padpx() {
				return `${uni.upx2px(this.padding)}px`;
			},
			gappx() {
				return `${uni.upx2px(this.gap)}px`;
			},
			mbtpx() {
				return `${uni.upx2px(this.mbt)}px`;
			},
			brpx() {
				return `${uni.upx2px(this.itemBR)}px`;
			}
		},
		data() {
			return {
				list: [],
				fallWidth: windowWidth,
				locationicon: require('../../../../static/images/usercase/dingwei.png'),
			}
		},
		watch: {
			value: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					if (newVal.length == 0) this.list = [];
					const newArr = newVal.slice(this.list.length, newVal.length);
					newArr.forEach(item => {
						if (typeof item.showChar == 'undefined') item.showChar = true;
					})
					this.list.push.apply(this.list, newArr);
				}
			}
		},
		mounted() {
			// #ifdef H5
			this.$nextTick(() => {
				this.waterfallWidth();
			})
			// #endif
			// #ifndef H5
			setTimeout(() => {
				this.waterfallWidth();
			}, 10)
			// #endif
		},
		methods: {
			showDistance(d) {
				let distance = '';
				if (d >= 1000) {
					distance = Number(d / 1000).toFixed(1) + 'km';
				} else {
					distance = d + 'm';
				}
				return distance;
			},
			toWorksDetail: function(item) {
				this.$emit("bToWorksDetail", item)
			},
			waterfallWidth() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query.select('#waterfall_flow').boundingClientRect(data => {
					if (data.width) that.fallWidth = data.width;
				}).exec();
			},
			loadImage({
				e,
				index
			}, item) {
				const gap = uni.upx2px(this.gap);
				const padding = uni.upx2px(this.padding);
				const width = ((this.fallWidth - gap * (this.columns - 1) - padding * 2) / this.columns);
				const rate = e.detail.width / e.detail.height;
				const imageHeight = width / rate;
				const rows = +Math.ceil(imageHeight);


				let newCharSize = 0;

				const gridRow = rows + (this.showChar && item.showChar ? uni.upx2px(parseFloat(newCharSize)) : 0) + uni
					.upx2px(parseFloat(this.mbt));
				// const gridRow = rows + (this.showChar && item.showChar ? uni.upx2px(parseFloat(this.charSize)) : 0) + uni
				// 	.upx2px(parseFloat(this.mbt));


				item.rows = gridRow;
				item.imageHeight = `${imageHeight}px`;
				// #ifdef VUE2
				this.$set(this.list, index, item);
				// #endif
			},
			clickImage(index) {
				//console.log('clickImage  ' + index)
				this.$emit('clickImage', index);
			},
			clickItem(index) {
				//console.log('clickItem  ' + index)
				this.$emit('clickItem', index);
			}
		}
	}
</script>
<style>
</style>
<style scoped lang="scss">
	.userview {
		height: 130rpx;
		width: 100%;
		background: #fff;

		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		// margin-top: -10rpx;
		display: grid;

		.username {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 10rpx;
			width: calc(100% - 20rpx);
			color: #333333;

			.name {
				width: 100rpx;
				height: 40rpx;
				color: #333333;
				font-size: 26rpx;
			}

			image {
				width: 20rpx;
				height: 20rpx;
			}

			.location {
				font-size: 20rpx;
				display: flex;
				align-items: center;
				color: #666666;
			}
		}

		.banji {
			padding-left: 10rpx;
			color: #333333;
			font-size: 26rpx;
		}
	}


	.waterfall-flow {
		display: grid;
		grid-template-columns: repeat(var(--col), 1fr);
		grid-template-rows: repeat(auto-fill, 1px);
		grid-auto-rows: 1px;
		grid-column-gap: var(--gap);
		padding: 0 var(--pad);
	}

	.item {
		margin-bottom: var(--mbt);
		border-radius: var(--br);
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
		overflow: hidden;
		font-size: 0;
		// 骗系统开启硬件加速
		transform: transition3d(0, 0, 0);

		.char {
			height: var(--h);
		}
	}

	// 图片下方内容扩展样式
	.char {
		padding: 0 10rpx;

		.title {
			line-height: 48rpx;
			font-size: 30rpx;
			font-weight: 700;
			color: #222;
		}

		.desc {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			line-height: 36rpx;
			font-size: 24rpx;
			color: #666;
		}
	}
</style>